<template>
  <div>
    <Tinymce ref="editor" style="width: 100%" v-model="details.textDTO.content" :showUploadBtn="showUploadBtn" menubar="false" :toolbar="toolbar" />
  </div>
</template>

<style lang="less" scoped>
</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import Tinymce from '@/components/Tinymce'

  export default {
    components: { Tinymce },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: {}
      },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        showUploadBtn: false,
        toolbar: ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo'],
        options: [{
          value: 'big-title',
          label: '大标题'
        }, {
          value: 'small-title',
          label: '小标题'
        }, {
          value: '',
          label: '正文'
        }, {
          value: 'other-text',
          label: '其他'
        }],
        textShape: [],
        textShapes: [{
          value: '粗体',
          label: 'font-w'
        }, {
          value: '斜体',
          label: 'font-italic'
        }, {
          value: '下划线',
          label: 'font-under'
        }],
        details: {
          textDTO: {
            content: ''
          }
        },
        form: {
          description: ''
        }
      }
    },
    // 初始化页面
    created() {
      this.details = this.details1
      this.details.textDTO = this.details1.textDTO
      this.details.textDTO.content = this.details1.textDTO.content
      const that = this
      this.$bus.$on('resetDetailsText' + this.eventId, function(details) {
        if (!that.$refs.editor) {
          return
        }
        that.details = details
        that.$refs.editor.setContent(details.textDTO.content)
      })
      this.$bus.$emit('textFormData' + this.eventId, this.details)
    },
    methods: {
    }
  }
</script>
